<template>
  <div class="app-container customer-div">
    <el-tabs v-model="tab">
      <el-tab-pane label="客户跟进" name="a1">
        <div style="margin-top: 20px">
          <!--搜索-->
          <el-form :inline="true" :model="params" size="mini" label-width="100px">
            <el-form-item label="客户名称：">
              <el-autocomplete
                      clearable
                      class="inline-input"
                      value-key="customerName"
                      :fetch-suggestions="querySearch"
                      v-model="params.customerName"
                      placeholder="请输入内容"
                      @select="handleSelectCustomerName"
                      :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item>


            <el-form-item label="是否为成交客户：" label-width="180px">
              <el-select  class="input-width" style="width:100px" placeholder="请选择" clearable v-model="params.isDealCustomer">
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="0" label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="业务员：">
              <el-select v-model="params.userId" filterable placeholder="请选择" clearable>
                <el-option
                        v-for="item in userOptionList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="跟进时间：">
              <el-date-picker
                      :default-time="['00:00:00', '23:59:59']"
                      v-model="params.trackingTime"
                      type="daterange"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                      @click="handleSearchList()"
                      type="primary">
                查询
              </el-button>
              <el-button
                      :loading="btnloading"
                      @click="downloadExcel()"
                      type="primary">
                导出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
                  border
                  v-loading="listLoading"
                  :data="list"
                  style="margin-top: 20px">
            <el-table-column  label="金蝶编号" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.kingNumber}}
              </template>
            </el-table-column>
            <el-table-column  label="公司名称"  min-width="200">
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column  label="是否为成交客户" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.isDealCustomer}}
              </template>
            </el-table-column>
            <el-table-column  label="关联客户"  min-width="300">
              <template slot-scope="scope">
                {{scope.row.relationCustomerNames}}
              </template>
            </el-table-column>
            <el-table-column  label="负责人" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.chargeUserName}}
              </template>
            </el-table-column>
            <el-table-column  label="潜在等级" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.customerPotential}}
              </template>
            </el-table-column>
            <el-table-column  label="采购等级" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.customerLabel}}
              </template>
            </el-table-column>

            <el-table-column  label="最近联系日期" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.lastTrackingTime}}
              </template>
            </el-table-column>

            <el-table-column  label="最近成交日期" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.lastOrderTime}}
              </template>
            </el-table-column>

            <el-table-column  label="跟进时间" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.trackingTime}}
              </template>
            </el-table-column>

            <el-table-column  label="跟进内容" min-width="300">
              <template slot-scope="scope">
                {{scope.row.trackingContent}}
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="params.pageNum"
                  :page-size="params.pageSize"
                  :page-sizes="[10,15,20]"
                  :total="count">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新客户" name="a2">
        <div style="margin-top: 20px">
          <!--搜索-->
          <el-form :inline="true" :model="params2" size="mini" label-width="100px">
            <el-form-item label="客户名称：">
              <el-autocomplete
                      clearable
                      class="inline-input"
                      value-key="customerName"
                      :fetch-suggestions="querySearch"
                      v-model="params2.customerName"
                      placeholder="请输入内容"
                      @select="handleSelectCustomerName"
                      :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item>

            <el-form-item label="业务员：">
              <el-select v-model="params2.userId" filterable placeholder="请选择" clearable>
                <el-option
                        v-for="item in userOptionList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="开始负责日期：">
              <el-date-picker
                      :default-time="['00:00:00', '23:59:59']"
                      v-model="params2.chargeStartTime"
                      type="daterange"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                      @click="handleSearchList2()"
                      type="primary">
                查询
              </el-button>
              <el-button
                      :loading="btnloading2"
                      @click="downloadExcel2"
                      type="primary">
                导出
              </el-button>
            </el-form-item>

          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
                  border
                  v-loading="listLoading"
                  :data="list2"
                  style="margin-top: 20px">
            <el-table-column  label="金蝶编号" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.kingNumber}}
              </template>
            </el-table-column>
            <el-table-column  label="公司名称"  min-width="200">
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column  label="关联客户" min-width="300">
              <template slot-scope="scope">
                {{scope.row.relationCustomerNames}}
              </template>
            </el-table-column>
            <el-table-column  label="负责人" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.chargeUserName}}
              </template>
            </el-table-column>
            <el-table-column  label="潜在等级" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.customerPotential}}
              </template>
            </el-table-column>
            <el-table-column  label="采购等级" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.customerLabel}}
              </template>
            </el-table-column>
            <el-table-column  label="开始负责日期" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.chargeStartTime}}
              </template>
            </el-table-column>
            <el-table-column  label="创建时间" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column  label="是否已成交" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.isDealCustomer}}
              </template>
            </el-table-column>
            <el-table-column  label="最近成交时间" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.lastOrderTime}}
              </template>
            </el-table-column>
            <el-table-column  label="联系人" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.contactName}}
              </template>
            </el-table-column>
            <el-table-column  label="是否为主联系人" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.isMainContact}}
              </template>
            </el-table-column>
            <el-table-column  label="是否有采购决定权" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.isBuyPermission}}
              </template>
            </el-table-column>

            <el-table-column  label="使用材料"  min-width="300">
              <template slot-scope="scope">
                {{scope.row.useGoods}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="params2.pageNum"
                  :page-size="params2.pageSize"
                  :page-sizes="[10,15,20]"
                  :total="count2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未成交" name="a3">
        <div style="margin-top: 20px">
          <!--搜索-->
          <el-form :inline="true" :model="params3" size="mini" label-width="100px">
            <el-form-item label="客户名称：">
              <el-autocomplete
                      clearable
                      class="inline-input"
                      value-key="customerName"
                      :fetch-suggestions="querySearch"
                      v-model="params3.customerName"
                      placeholder="请输入内容"
                      @select="handleSelectCustomerName"
                      :trigger-on-focus="false"
              ></el-autocomplete>
            </el-form-item>

            <el-form-item label="业务员：">
              <el-select v-model="params3.userId" filterable placeholder="请选择" clearable>
                <el-option
                        v-for="item in userOptionList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="距上次成交时间：" label-width="120px">
                <el-input style="width:150px" v-model="params3.unOrderDayNum"></el-input><span style="padding-left:10px">天</span>
            </el-form-item>
            <el-form-item>
              <el-button
                      @click="handleSearchList3()"
                      type="primary">
                查询
              </el-button>
              <el-button
                      :loading="btnloading3"
                      @click="downloadExcel3"
                      type="primary">
                导出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据列表-->
        <div class="table-container">
          <el-table
                  border
                  v-loading="listLoading3"
                  :data="list3"
                  style="margin-top: 20px">
            <el-table-column  label="金蝶编号"  min-width="100">
              <template slot-scope="scope">
                {{scope.row.kingNumber}}
              </template>
            </el-table-column>
            <el-table-column  label="公司名称"  min-width="200">
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column  label="关联客户" min-width="300">
              <template slot-scope="scope">
                {{scope.row.relationCustomerNames}}
              </template>
            </el-table-column>
            <el-table-column  label="负责人" align="center" min-width="100">
              <template slot-scope="scope">
                {{scope.row.chargeUserName}}
              </template>
            </el-table-column>
            <el-table-column  label="潜在等级" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.customerPotential}}
              </template>
            </el-table-column>
            <el-table-column  label="采购等级" align="center" min-width="120">
              <template slot-scope="scope">
                {{scope.row.customerLabel}}
              </template>
            </el-table-column>
            <el-table-column  label="最近成交时间" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.lastOrderTime}}
              </template>
            </el-table-column>
            <el-table-column  label="外采商品牌号" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.goodsName}}
              </template>
            </el-table-column>
            <el-table-column  label="数量" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.goodsNum}}
              </template>
            </el-table-column>
            <el-table-column  label="购买时间" align="center" min-width="150">
              <template slot-scope="scope">
                {{scope.row.buyTime}}
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChange3"
                  @current-change="handleCurrentChange3"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="params3.pageNum"
                  :page-size="params3.pageSize"
                  :page-sizes="[10,15,20]"
                  :total="count3">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { getOrderUsersList,salesmanCheck,getCustomerOption,buyClassRateByYear,buyGoodsRateByYear,buyRemindList,orderGoodsList} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'

  export default {
    name: "buyFrequencyReport",
    data(){
      return{
        roles:store.getters.roles ? store.getters.roles : [],
        params:{
          pageNum:1,
          pageSize:10,
          customerName:'',
          userId:'',
          trackingTime:[],
          isDealCustomer:'',
          type:'trackingList',
        },
        list:[],
        count:0,
        listLoading:false,
        tab:'a1',
        userOptionList:[],
        title:[],

        list2:[],
        count2:0,
        listLoading2:false,
        params2:{
          pageNum:1,
          pageSize:10,
          customerName:'',
          userId:'',
          chargeStartTime:[],
          type:'newCustomer',
        },

        list3:[],
        count3:0,
        listLoading3:false,
        params3:{
          pageNum:1,
          pageSize:10,
          customerName:'',
          userId:'',
          unOrderDayNum:30,
          type:'unDealCustomer',
        },

        customerList:[],
        customerList2:[],
        customerList3:[],
        loading:false,
        loading2:false,
        loading3:false,
        btnloading:false,
        btnloading2:false,
        btnloading3:false,

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),


    },
    created() {
      let now = new Date();
      let nowMonth = now.getMonth(); //当前月
      let nowYear = now.getFullYear(); //当前年
      //本月的开始时间
      let monthStartDate = new Date(nowYear, nowMonth, 1);
      //本月的结束时间
      let monthEndDate = new Date(nowYear, nowMonth+1, 0,23,59,59);
      let startDate = formatDate(monthStartDate, 'yyyy-MM-dd');
      let endDate = formatDate(monthEndDate, 'yyyy-MM-dd');
      this.params.trackingTime = [startDate,endDate];
      this.params2.chargeStartTime = [startDate,endDate];
      this.getListData();
      this.getListData2();
      this.getListData3();
      this.getUserOptionList();
    },
    filters: {

    },
    methods:{
      //下载excle
      downloadExcel(){
        let params = JSON.parse(JSON.stringify(this.params));
        params.isExport = 1;
        this.btnloading = true;
        salesmanCheck(params).then((res)=>{
          this.btnloading = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnloading = false;
        })
      },

      //下载excle
      downloadExcel2(){
        let params = JSON.parse(JSON.stringify(this.params2));
        params.isExport = 1;
        this.btnloading2 = true;
        salesmanCheck(params).then((res)=>{
          this.btnloading2 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnloading2 = false;
        })
      },

      //下载excle
      downloadExcel3(){
        let params = JSON.parse(JSON.stringify(this.params3));
        params.isExport = 1;
        this.btnloading3 = true;
        salesmanCheck(params).then((res)=>{
          this.btnloading3 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnloading3 = false;
        })
      },

      //下载表格数据格式化
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

      //客户名称输入匹配
      querySearch(queryString, cb){
        let data = {};
        data.keywords = queryString;
        getCustomerOption(data).then((res)=>{
          cb(res);
        })
      },

      //选择客户名称
      handleSelectCustomerName(item){
        if(this.tab == 'a1'){
          this.params.customerName = item.customerName;
        }else if(this.tab == 'a2'){
          this.params2.customerName = item.customerName;
        }else if(this.tab == 'a3'){
          this.params3.customerName = item.customerName;
        }
      },

      handleSearchList2(){
        this.params2.pageNum = 1;
        this.getListData2();
      },

      handleSizeChange2(val){
        this.params2.pageNum = 1;
        this.params2.pageSize = val;
        this.getListData2();
      },
      handleCurrentChange2(val){
        this.params2.pageNum = val;
        this.getListData2();
      },

      getListData2(){
        this.listLoading2 = true;
        salesmanCheck(this.params2).then((res)=>{
          this.list2 = res.list;
          this.count2 = res.count;
          this.listLoading2 = false;
        }).catch(()=>{
          this.listLoading2 = false;
        })
      },

      handleSearchList3(){
        this.params3.pageNum = 1;
        this.getListData3();
      },

      handleSizeChange3(val){
        this.params3.pageNum = 1;
        this.params3.pageSize = val;
        this.getListData3();
      },
      handleCurrentChange3(val){
        this.params3.pageNum = val;
        this.getListData3();
      },

      getListData3(){
        this.listLoading3 = true;
        salesmanCheck(this.params3).then((res)=>{
          this.list3 = res.list;
          this.count3 = res.count;
          this.listLoading3 = false;
        }).catch(()=>{
          this.listLoading3 = false;
        })
      },

      handleSearchList(){
        this.params.pageNum = 1;
        this.getListData();
      },

      handleSizeChange(val){
        this.params.pageNum = 1;
        this.params.pageSize = val;
        this.getListData();
      },
      handleCurrentChange(val){
        this.params.pageNum = val;
        this.getListData();
      },

      getListData(){
        this.listLoading = true;
        salesmanCheck(this.params).then((res)=>{
          this.list = res.list;
          this.count = res.count;
          this.title = res.title;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },

    },
  }
</script>


